<template v-if="showload">
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('add.no44')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('newcrumbs.crumbsNin')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- ------------ 搜索查询栏结束 -------------- -->
    <div class="list_operation">
          <el-button v-if="$store.state.common.permiss.dictionary.includes('addA')" type="primary" @click.stop="addDic">{{$t('new.no102')}}</el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleTab">
        <el-tab-pane :label="$t('new.no104')" name="1"></el-tab-pane>
        <el-tab-pane :label="$t('new.no105')" name="2"></el-tab-pane>
        <el-tab-pane :label="$t('new.no106')" name="3"></el-tab-pane>
    </el-tabs>
    <div class="table">
        <el-table :data="tableData1" size="small" stripe highlight-current-row  @current-change="selectList">
           <el-table-column type="index" width="70" :label="$t('serviceManage.index')">
          </el-table-column>
          <el-table-column align="center" prop="fieldKeyName" :label="$t('new.no107')">
          </el-table-column>
          <el-table-column align="center" prop="fieldKey" :label="$t('new.no108')">
          </el-table-column>
          <el-table-column align="center" prop="remark" :label="$t('public.no37')">
          </el-table-column>
          <el-table-column align="center" prop="operation" :label="$t('public.operation')">
            <template slot-scope="scope">
              <span v-if="$store.state.common.permiss.dictionary.includes('editA')" class="table_opr" @click="editDic(scope.row)">
                {{$t('public.no51')}}
              </span>
              <span class="table_opr" @click="delDic(scope.row.id)" v-if="$store.state.common.permiss.dictionary.includes('delA')">{{$t('idManage.del')}}
              </span>
            </template>
          </el-table-column>
        </el-table>
    </div>
    <el-row  type="flex" justify="end" v-if="true" class="pages">
        <el-pagination
          @current-change="handleCurrentChange1"
          :current-page="currentPage1"
          layout="total, prev, pager, next, ->"
          :total="pageTotal1?pageTotal1:0">
        </el-pagination>
    </el-row>
    <div class="list_operation">
    <el-button v-if="$store.state.common.permiss.dictionary.includes('addB')&&selectDic" type="primary" @click.stop="addVal">{{$t('new.no103')}}</el-button>
    <el-button v-else-if="$store.state.common.permiss.dictionary.includes('addB')&&!selectDic" type="primary" disabled>{{$t('new.no103')}}</el-button>
    </div>
    <div class="table">
        <el-table :data="tableData2" size="small" stripe >
           <el-table-column type="index" width="70" :label="$t('serviceManage.index')">
          </el-table-column>
          <el-table-column align="center" prop="fieldTypeName" :label="$t('new.no107')">
          </el-table-column>
          <el-table-column align="center" prop="fieldTypeValue" :label="$t('new.no109')">
          </el-table-column>
          <el-table-column align="center" prop="remark" :label="$t('public.no37')">
          </el-table-column>
          <el-table-column fixed="right" align="center" prop="operation" :label="$t('public.operation')" width="180">
            <template slot-scope="scope">
              <span v-if="$store.state.common.permiss.dictionary.includes('editB')" class="table_opr" @click="modifyVal(scope.row)">{{$t('public.no51')}}</span>
              <span v-if="$store.state.common.permiss.dictionary.includes('delB')" class="table_opr" @click="delVal(scope.row.id)">{{$t('idManage.del')}}
              </span>
            </template>
          </el-table-column>
        </el-table>
    </div>
    <el-row  type="flex" justify="end">
      <div class="pages" v-if="true">
        <el-pagination
          @current-change="handleCurrentChange2"
          :current-page="currentPage2"
          layout="total, prev, pager, next, ->"
          :total="pageTotal2?pageTotal2:0">
        </el-pagination>
      </div>
    </el-row>
    <!-- ------------------添加包名开始-------------------- -->
    <el-dialog :title="$t('public.addEdit')" :visible.sync="dicVisible"  width="600px">
      <el-form :model="dicForm" size="small" ref="dicForm" :rules="dicRules" label-width="140px">
        <el-form-item :label="$t('new.no107')" prop="fieldKeyName">
          <el-input v-model="dicForm.fieldKeyName" style="width:250px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('new.no108')" prop="fieldKey">
          <el-input v-model="dicForm.fieldKey" style="width:250px;" :readonly="isedit"></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.no37')">
          <el-input type="textarea" v-model="dicForm.remark" rows="4" style="width:250px;" maxlength="600"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dicVisible = false">{{$t('public.no50')}}</el-button>
        <el-button type="primary" @click="dicsubmit">{{$t('public.no49')}}</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="$t('public.addEdit')" :visible.sync="valVisible"  width="600px">
      <el-form :model="valForm" size="small" ref="valForm" :rules="valRules" label-width="140px">
        <el-form-item :label="$t('new.no107')" prop="fieldTypeName">
          <el-input v-model="valForm.fieldTypeName" style="width:250px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('new.no109')" prop="fieldTypeValue">
          <el-input v-model="valForm.fieldTypeValue" style="width:250px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.no37')">
          <el-input type="textarea" v-model="valForm.remark" rows="4" style="width:250px;" maxlength="600"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="valVisible = false">{{$t('public.no50')}}</el-button>
        <el-button type="primary" @click="valSubmit">{{$t('public.no49')}}</el-button>
      </div>
    </el-dialog>
    <div class="foot"></div>
  </div>
</template>
<script>
import getApp from 'src/mixins/getApp.js';//获取app和aok
export default{
  mixins:[getApp],
  data () {
    return {
      activeName:'1',
      isedit:false,
      showpro:true,
      flag: true,
      pageTotal1: 0, // 分页总数
      currentPage1: 1, // 当前页下标
      pageSize1: 10, // 每页条数
      pageTotal2: 0, // 分页总数
      currentPage2: 1, // 当前页下标
      pageSize2: 10, // 每页条数
      selectDic:null,
      tableData1:[],
      tableData2:[],//产品列表数据
      dicVisible:false,
      valVisible:false,
      selectRows:null,
      dicForm:{
        id:'',
        fieldCategory:'',
        fieldKey:'',
        fieldKeyName:'',
        remark:''
      },
      valForm:{
        id:'',
        businessId:'',
        fieldTypeName:'',
        fieldTypeValue:'',
        remark:''
      },
      dicRules: {// 验证规则
        fieldKey: [
          {required: true, message: this.$t('login.required'), trigger: 'blur' }
        ],
        fieldKeyName: [
          {required: true, message: this.$t('login.required'), trigger: 'blur' }
        ]
      },
      valRules: {// 验证规则
        fieldTypeName: [
          {required: true, message: this.$t('login.required'), trigger: 'blur' }
        ],
        fieldTypeValue: [
          {required: true, message: this.$t('login.required'), trigger: 'blur' }
        ]
      },
    }
  },
  created(){},
  mounted(){
    this.getDiclist(1);
  },
  watch:{
    showpro(){
      if(!this.showpro){
        this.tableData2=[]
      }
    }
  },
  methods: {
    //product_applist
    handleCurrentChange1 (val) { // 分页按钮第几页
      this.currentPage1 = val;
      this.getDiclist();
    },
    handleCurrentChange2 (val) { // 分页按钮第几页
      this.currentPage2 = val;
      this.getVallist();
    },
    handleTab(tab, event) {
       this.getDiclist(tab.name);
    },
    getDiclist(type){
      type=type?type:this.activeName;
      let option = {
        pageNum:this.currentPage1,
        pageSize:this.pageSize1,
        param: {
          fieldCategory:type
        }       
      }
      this.$axios.post(this.$action.dictionary_list, option).then(res => {
        if (res.code == 200) {
          this.tableData1 = res.data.list;
          this.pageTotal1 = res.data.total;
        }else{
          this.$globalMsg.error(res.message)
        }
      })
    },
    addDic(){
      this.dicVisible = true;
      this.isedit=false;
      this.dicForm = {
        fieldCategory:this.activeName,
        fieldKey:'',
        fieldKeyName:'',
        remark:'',
        id:''
      }
    },
    dicsubmit(){
      this.$refs.dicForm.validate((valid) => {
        if (valid) {
          let option = {
            param: {
              ...this.dicForm
            }       
          }
          const actionUrl=this.dicForm.id?this.$action.dictionary_update:this.$action.dictionary_add;
          this.$axios.post(actionUrl, option).then(res => {
            if (res.code == 200) {
              this.$globalMsg.success(res.message);
              this.dicVisible=false;
              this.getDiclist();
            }else{
              this.$globalMsg.error(res.message)
            }
          })
        }
      })
    },
    editDic(data){
      this.dicVisible = true;
      this.isedit=true;
      this.dicForm = {
        id:data.id,
        fieldKey:data.fieldKey,
        fieldKeyName:data.fieldKeyName,
        remark:data.remark
      }

    },
    delDic(id){
      this.$confirm(this.$t('long.no17'), this.$t('public.del'), {
        type: "warning"
      })
      .then(() => {
        let option = {
          param: {
            id:id
          }       
        }
        this.$axios.post(this.$action.dictionary_del, option).then(res => {
          if (res.code == 200) {
            this.$globalMsg.success(res.message);
            this.getDiclist();
          }else{
            this.$globalMsg.error(res.message)
          }
        })
      })
    },
    selectList(row){
        if(row){
            this.selectDic=row;
            this.getVallist();
        }  
    },
    getVallist(){
      let option = {
        pageNum:this.currentPage2,
        pageSize:this.pageSize2,
        param: {
          id:this.selectDic?this.selectDic.id:'',
          fieldCategory:this.activeName,
          fieldKey:this.selectDic?this.selectDic.fieldKey:'',
        }       
      }
      this.$axios.post(this.$action.dictionary_type, option).then(res => {
        if (res.code == 200) {
          this.tableData2 = res.data.list;
          this.pageTotal2 = res.data.total;
        }else{
          this.$globalMsg.error(res.message)
        }
      })
    },
    addVal(){
      this.valVisible=true;
      this.selectRows =null;
      this.valForm={
        id:'',
        businessId:this.selectDic.id,
        fieldTypeName:'',
        fieldTypeValue:'',
        remark:''
      };
    },
    valSubmit(){
      this.$refs.valForm.validate((valid) => {
        if (valid) {
          let option = {
            param: {
              ...this.valForm
            }       
          }
          const actionUrl=this.valForm.id?this.$action.dictionary_typeUpdate:this.$action.dictionary_typeAdd;
          this.$axios.post(actionUrl, option).then(res => {
            if (res.code == 200) {
              this.$globalMsg.success(res.message);
              this.valVisible=false;
              this.getVallist();
            }else{
              this.$globalMsg.error(res.message)
            }
          })
        }
      })
    },
    modifyVal(data) {
      this.valVisible = true;
      this.valForm={
        id:data.id,
        businessId:this.selectDic.id,
        fieldTypeName:data.fieldTypeName,
        fieldTypeValue:data.fieldTypeValue,
        remark:data.remark
      };
    },
    delVal(id){
      this.$confirm(this.$t('long.no17'), this.$t('public.del'), {
        type: "warning"
      })
      .then(() => {
        let option = {
          param: {
            id:id,
            businessId:this.selectDic.id
          }       
        }
        this.$axios.post(this.$action.dictionary_typeDel, option).then(res => {
          if (res.code == 200) {
            this.$globalMsg.success(res.message);
            this.getVallist();
          }else{
            this.$globalMsg.error(res.message)
          }
        })
      })
    }
  }
}
</script>
<style scoped lang="scss">

</style>
